import React from "react";
import * as echarts from "echarts"
import { Component } from "react";
import { getStatisticMonthlyApi } from "../../js/bigscreen/api";
import "../../css/bigscreen/securitytrend.css"


var trendchart;
class SecurityTrend extends Component {
    constructor(props) {
        super(props);
        this.state = {
            weekInspectnum: [],
            weekPatrolnum: [],
            weekArr: []
        }
    }
    componentDidMount() {
        let educationId = parseInt(sessionStorage.getItem("departmentId"))
        this.getStatisticMonthly(educationId);
    }


    getStatisticMonthly = (parent) => {
        getStatisticMonthlyApi(parent).then((res) => {
            if (res.data) {
                let inspectList = [];
                let patrolList = [];
                let weekArr = [];
                for (var i = 0; i < res.data.statistic.length; i++) {
                    const week = res.data.statistic[i].week;
                    weekArr.push("第"+ (week+1) +"周");
                    inspectList.push(res.data.statistic[i].inspectnum);
                    patrolList.push(res.data.statistic[i].patrolnum);
                }
                this.setState({
                    weekArr: weekArr,
                    weekInspectnum: inspectList,
                    weekPatrolnum: patrolList
                })
                this.initLineChart();
            }
        }).catch((e) => {
            console.log(e);
        })
    }

    initLineChart() {
        
        if (trendchart == null) {
            trendchart = echarts.init(document.getElementById("trendchart"));
        } else {
            echarts.dispose(trendchart)
            trendchart = echarts.init(document.getElementById("trendchart"));
        }
        window.onresize = function () {
            trendchart.resize();
        }
        var charts = {
            // unit: 'Kbps',
            names: ['安全巡检', '安全巡更'],
            lineX: this.state.weekArr,
            value: [
                this.state.weekInspectnum,
                this.state.weekPatrolnum,
            ]

        }
        var color = ['rgba(23, 255, 243', 'rgba(255,100,97']
        var lineY = []

        for (var i = 0; i < charts.names.length; i++) {
            var x = i
            if (x > color.length - 1) {
                x = color.length - 1
            }
            var data = {
                name: charts.names[i],
                type: 'line',
                color: color[x] + ')',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: color[x] + ', 0.3)'
                    }, {
                        offset: 0.6,
                        color: color[x] + ', 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
                symbol: 'circle',
                symbolSize: 5,
                data: charts.value[i]
            }
            lineY.push(data)
        }
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: charts.names,
                textStyle: {
                    fontSize: 12,
                    color: 'rgb(0,253,255,0.6)'
                },
                left: '6%',
                top: '2%',
                itemGap: 80
            },
            grid: {
                top: '20%',
                left: '6%',
                right: '10%',
                bottom: '12%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: charts.lineX,
                axisLabel: {
                    color: 'rgb(0,253,255,0.6)'
                },
                axisTick: {
                    show: false,
                }
            },
            yAxis: {
                name: charts.unit,
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    color: 'rgb(0,253,255,0.6)'
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                }
            },
            series: lineY

        }



        trendchart.setOption(option);
    }

    render() {
        return (
            <div className="securitytrend">
                <div className="securitytrendheader">
                    <svg class="icon" aria-hidden="true">
                        <use xlinkHref="#icon-qushi"></use>
                    </svg>
                    <span className="securitytrendheadertxt">校园安全工作趋势</span>
                </div>
                <div id="trendchart"></div>
            </div>

        )
    }
}

export { SecurityTrend }